@charset "utf-8";

html{
    min-width:1200px; /* 最小宽度 */
}

/* header */
#header{
    position: relative;
    width:100%;
    height:894px;
    /*background:pink;  test */
}
#h-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#h-bg p{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:no-repeat center top;
}
/*#h-bg p.bg1{*/
    /*background-image: url(/Web/public/img/index/header/banner.jpg);*/
/*}*/
/*#h-bg p.bg2{*/
    /*display: none;*/
    /*background-image: url(/Web/public/img/index/header/banner2.png);*/
/*}*/
#h-main{
    position:relative;
    width:1200px;
    height:100%;
    margin:0 auto;
}
#h-main #nav{
    width: 100%;
    height: 38px;
    padding-top:26px;
}
#nav .logo{
    float:left;
    width: 210px;
    height: 50px;
}
#nav .n-main{
    overflow:hidden;
    float:right;
    width:790px;
    height: 50px;
}
#nav .n-main ul{
    width:100%;
}
#nav .n-main ul li{
    float:left;
    height:38px;
    margin-left:44px;
    font-size:16px;
    line-height:38px
}
#nav .n-main ul li a{
    display:block;
    width:100%;
    height:100%;
    color:#fff;
    transition:color .3s;
}
#nav .n-main ul li.active a,#nav .n-main ul li:hover a{
    color:#09cbd7;
}
#h-center{
    width: 691px;
    height:312px;
    margin-top:225px;
    color:#fff;
}
#h-center .p1{
    width:691px;
    height:82px;
    background-image:url("/Web/public/img/index/header/WEB.png");
}
#h-center .p2{
    width:382px;
    height:44px;
    margin-top:50px;
    background-image:url("/Web/public/img/index/header/HTML5.png");
}
#h-center .p3{
    display:block;
    width:224px;
    height:65px;
    margin-top:70px;
    background:#09cbd7 url("/Web/public/img/index/header/MORE.png") no-repeat center center;
    border-radius:3px;
}
#h-tab{
    position:absolute;
    bottom:50px;
    left:50%;
    width:56px;
    height:4px;
    margin-left:-28px;
}
#h-tab .btn{
    width:18px;
    height:4px;
    background-color:#fff;
    border-radius:2px;
    transition:background-color .3s;
    cursor: pointer;
}
#h-tab .btn.active{
    background-color:#06c9d5;
}
#h-tab .leftBtn{
    float:left;
    margin-left:5px;
}
#h-tab .rightBtn{
    float:right;
    margin-right:5px;
}

/* service */
#service{
    width:100%;
    height:690px;
    background-color:#fff;
}
.main{
    width:1200px;
    height:100%;
    margin:0 auto;
}
.main .title{
    width:151px;
    height:66px;
    margin:0 auto;
    padding-top:118px;
}
.main .title h2{
    font-size:30px;
    font-weight:normal;
    text-align:center;
    letter-spacing:5px;
}
.main .title p{
    width:100%;
    height:12px;
    margin-top:14px;
    background:url(/Web/public/img/index/service/txt.png) no-repeat center top;
}
#s-main .content{
    overflow:hidden;
    width:100%;
    height:272px;
    margin-top:100px;
    /* background:pink; */
}
#s-main .content ul{
    width:1000%;
    height:100%;
}
#s-main .content ul li{
    float:left;
    width:204px;
    height:100%;
    margin-right:128px;
    /* background:red; */
}
#s-main .content ul li .circle{
    position:relative;
    width:204px;
    height:204px;
    background:#f3f9fe;
    border-radius:50%;
    cursor:pointer;
}
#s-main .content .circle .img{
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

#s-main .content .list1 .circle .img{
    width:110px;
    height:95px;
}
#s-main .content .list2 .circle .img{
    width:65px;
    height:110px;
}
#s-main .content .list3 .circle .img{
    width:122px;
    height:86px;
}
#s-main .content .list4 .circle .img{
    width:107px;
    height:95px;
}

#s-main .content .circle .img div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:200%;
    transition:top .2s;
}
#s-main .content .circle .img div img{
    display:block;
}
#s-main .content ul li .circle:hover .img div{
    top:-100%;
}
#s-main .content ul li p.txt{
    margin-top:35px;
    font-size:24px;
    line-height:24px;
    text-align:center;
}

/* video */
#video{
    width:100%;
    height:912px;
    background-color:#f5f6f7;
}
#v-main .title p{
    background-image:url(/Web/public/img/index/video/video.png);
}
#v-main .content{
    position:relative;
    width:100%;
    height:550px;
    margin-top:75px;
}
#v-main .videos{
    width:100%;
    height:426px;
}
#v-main .videos .box{
    overflow:hidden;
    float:left;
}
#v-main .videos .left{
    width:498px;
    height:100%;
    margin-right:30px;
}
#v-main .videos .center{
    width:321px;
    height:100%;
}
#v-main .videos .right{
    float:right;
    width:321px;
    height:100%;
}

#v-main .videos .box a{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    cursor: pointer;
}
#v-main .videos .box a iframe{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
}
#v-main .videos .box a p{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:42px;
    background:url(/Web/public/img/index/video/btn.png) no-repeat 10px 9px;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,.5);
    font-size:16px;
    color:#fff;
    text-indent:50px;
    line-height:42px;
}
#v-main .videos .center a,#v-main .videos .right a{
    height:198px;
    margin-bottom:30px;
}
#v-main .more{
    position:absolute;
    bottom:0;
    left:50%;
    width:137px;
    height:44px;
    margin-left:-68px;
    border:1px solid #bbb;
    border-radius:5px;
}
#v-main .more a{
    display:block;
    width:100%;
    height:100%;
    line-height:44px;
    text-align:center;
    color:#000;
    font-family:"Arial",serif;
    transition:.2s;
}
#v-main .more a:hover{
    background:#bbb;
    color:#fff;
}



/* speaker */
#speaker{
    overflow:hidden;
    width:100%;
    height:890px;
    background-image:url(/Web/public/img/index/speaker/bg.png);
}
#sp-main .title h2{
    color:#fff;
}
#sp-main .title p{
    background-image:url(/Web/public/img/index/speaker/speakers.png);
}
#sp-main .speaker-content{
    position:relative;
    width:100%;
    height:510px;
    margin-top:72px;
}
#sp-main .s-c-img{
    overflow:hidden;
    width:100%;
    height:384px;
}
#sp-main .s-c-img ul{
    width:10000%;
    height: 100%;
    margin-left:0;
    transition: margin-left .5s;
}
#sp-main .s-c-img ul li{
    position:relative;
    float:left;
    width:270px;
    height:100%;
    margin-right:40px;
    background: #e0e7ef top center;
    background-size: cover;
    cursor:pointer;

}
#sp-main .s-c-img .txt{
    position:absolute;
    left:0;
    top:320px;
    width:230px;
    height:auto;
    padding:10px 20px 30px;
    background-color:#000;
    background-color:rgba(0,0,0,.5);
    color:#fff;
    transform:translate(0,0);
    transition: .5s;
}
#sp-main .s-c-img ul li:hover .txt{
    transform:translate(0,-100%);
    top:384px;

    /* 给IE8读的，\0 或者 \9 这个玩意儿只有IE8能读出来 */
    top:auto\0;
    bottom:0\0;
    height:auto\0;
}
/*
	#sp-main .s-c-img .txt{
		position:absolute;
		left:0;
		bottom:0;
		width:230px;
		height:auto;
		max-height:25px;
		padding:10px 20px 30px;
		background-color:rgba(0,0,0,.5);
		color:#fff;
		transition: .5s;
	}
	#sp-main .s-c-img ul li:hover .txt{
		max-height:100%;
	}
*/

#sp-main .s-c-img .txt h5{
    font-size:22px;
    font-weight:normal;
}
#sp-main .s-c-img .txt .pos{
    font-size:16px;
    margin-bottom:15px;
}
#sp-main .s-c-img .txt .summary{
    color:#eee;
}
#sp-main .s-c-more{
    position:absolute;
    bottom:0;
    left:50%;
    width:138px;
    height:45px;
    margin-left:-69px;
    border:1px solid #4c5a64;
    font-family:"Arial" , "微软雅黑" , serif;
    line-height:45px;
    text-align:center;
    color:#fff;
    border-radius:5px;
    cursor:pointer;
}
#sp-main .s-c-arrow p{
    position:absolute;
    top:155px;
    width:68px;
    height:68px;
    border-radius:50%;
    background:none no-repeat center center;

    background-color:#111;
    background-color:rgba(255,255,255,.1);
    transition: background-color .3s;
    cursor: pointer;
}
#sp-main .s-c-arrow p.left-btn{
    left:-108px;
    background-image:url(/Web/public/img/index/speaker/left.png);
}
#sp-main .s-c-arrow p.right-btn{
    right:-108px;
    background-image:url(/Web/public/img/index/speaker/right.png);
}
#sp-main .s-c-arrow p:hover{
    background-color:rgba(255,255,255,.2);
}

#knowledge{
    width:100%;
    height:1930px;
    background:#fff;
}
#k-main.main .title{
    width:300px;
}
#k-main.main .title p{
    background-image:url("/Web/public/img/index/knowledge/knowledge.png");
}
#k-main .knowledge-content{
    width:100%;
    height:1629px;
    margin-top:80px;
}
#k-main .knowledge-content ul li{
    width:100%;
    height:262px;
    margin-bottom:60px;
}
#k-main .k-c-dec{
    float:left;
    width:770px;
    height:162px;
    padding:50px;
    background-color:#f5f6f7;
    box-shadow:1px 1px 3px #bbb;
}
#k-main .k-c-dec h3{
    font-size:24px;
}
#k-main .k-c-dec .txt{
    margin:30px 0;
    color:#777;
    font-size:16px;
    letter-spacing:1px;
}
#k-main .k-c-dec a{
    display:block;
    width:100px;
    height:34px;
    line-height:34px;
    border:1px solid #bbb;
    color:#000;
    text-align:center;
    border-radius:3px;
    transition: .1s;
}
#k-main .k-c-dec a:hover{
    background-color: #bbb;
    color:#f5f6f7;
}
#k-main .k-c-img{
    float:right;
    width:300px;
    height:100%;
}

/* transition */
#transition{
    position:relative;
    width:100%;
    height:599px;
    background:url("/Web/public/img/index/transition/bg.jpg") center top;
}
#t-main{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:1040px;
    height:141px;
    margin:auto;
    background-image:url("/Web/public/img/index/transition/txt.png");
}

/* vip */
#vip{
    width:100%;
    height:1080px;
    background-color:#f5f6f7;
}
#vip-main{
    width:1200px;
    height:100%;
}
#vip-main .title{
    width:300px;
}
#vip-main .title p{
    background-image:url(/Web/public/img/index/vip/VIP.png);
}
#vip-main .v-m-content{
    width:100%;
    height:700px;
    margin-top:80px;
    background-color:#000;
}
#vip-main .v-m-content ul{
    width:100%;
    height:100%;
}
#vip-main .v-m-content ul li{
    float:left;
    width:300px;
    height:100%;
}
#vip-main .v-m-content ul li a{
    position: relative;
    float:left;
    display:block;
    width:150px;
    height:175px;
}
#vip-main .v-m-content ul li a.big{
    width:300px;
    height:350px;
}
#vip-main .v-m-content ul li a img{
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
}
#vip-main .v-m-content ul li a .hide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    font-family: "楷体","serif";
    opacity: 0;
    transition: opacity .3s;
}
#vip-main .v-m-content ul li a:hover .hide{
    opacity: 1;
}
#vip-main .v-m-content ul li a .hide p{
    color: #aaa;
    text-indent: 5px;
}
#vip-main .v-m-content ul li a .hide p span{
    color: #fff;
}

/* works */
#works{
    overflow:hidden;
    width:100%;
    height:980px;
}
#w-main{
    position:relative;
    width:1200px;
}
#w-main .title p{
    background-image:url(/Web/public/img/index/works/works.png);
}
#w-main .w-m-content{
    position:absolute;
    left:50%;
    width:1325px;
    height:728px;
    margin-top:68px;
    margin-left:-660px;
}
#w-main .w-m-c-tab{
    overflow:hidden;
    width:870px;
    height:50px;
    margin:0 auto;
}
#w-main .w-m-c-tab ul{
    width:200%;
}
#w-main .w-m-c-tab ul li{
    float:left;
    width:158px;
    height:48px;
    margin-right:76px;
    border:1px solid #cfcfcf;
    font-size:16px;
    text-align:center;
    line-height:48px;
    border-radius:3px;
    cursor:pointer;
    transition:.3s
}
#w-main .w-m-c-tab ul li:hover,#w-main .w-m-c-tab ul li.on{
    background-color:#09cbd7;
    border-color:#09cbd7;
    color:#fff;
}
#w-main .w-m-c-works{
    position: relative;
    width:100%;
    height:760px;
    margin-top:60px;
}
#w-main .w-m-c-works ul{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
#w-main .w-m-c-works ul.m1{
    display: block;
}
#w-main .w-m-c-works ul > li{
    overflow:hidden;
    float:left;
    width: 440px;
    height: 285px;
}
#w-main .w-m-c-works ul > li a{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    cursor: pointer;
    background: none no-repeat center center/cover;
}
#w-main .w-m-c-works ul > li a img{
    display:block;
}
#w-main .w-m-c-works ul > li a .hide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:30px;
    text-align:center;
    line-height:285px;
    opacity:0;
    transition:opacity .3s;
}
#w-main .w-m-c-works ul > li a:hover .hide{
    opacity:1;
}

/* footer */
